<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <el-card>
        <div slot="header">
          <i class="el-icon-s-data"></i>
          7天访问量
          <el-tag class="tag-home" type="success">周</el-tag>
        </div>
        <div id="chart_a" class="three-chart"></div>
        <div class="in-foot-all">日平均数：{{ browserAgv }}</div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <el-card>
        <div slot="header">
          <i class="el-icon-s-data"></i>
          订单量
          <el-tag class="tag-home" type="success">日</el-tag>
        </div>
        <div id="chart_b" class="three-chart"></div>
        <div class="in-foot-all">订单总数：1221</div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <el-card>
        <div slot="header">
          <i class="el-icon-basketball"></i>
          浏览器信息
          <el-tag class="tag-home">更新时间：{{ browserUpdateTime }}</el-tag>
        </div>
        <div id="chart_c" class="three-chart device-col"></div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <el-card>
        <div slot="header">
          <i class="el-icon-s-data"></i>
          CPU
          <el-tag class="tag-home" type="success">分钟</el-tag>
        </div>
        <div id="chart_d" class="three-chart" style="height: 200px;"></div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <el-card>
        <div slot="header">
          <i class="el-icon-s-data"></i>
          内存
          <el-tag class="tag-home" type="success">分钟</el-tag>
        </div>
        <div id="chart_e" class="three-chart" style="height: 200px;"></div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <el-card>
        <div slot="header">
          <i class="el-icon-s-data"></i>
          硬盘
          <el-tag class="tag-home" type="success">分钟</el-tag>
        </div>
        <div id="chart_f" class="three-chart" style="height: 200px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
  import { browser, weekVisit,deviceUse } from '@/api/work'
  import { parseTime } from '@/utils/index'
  import * as echarts from 'echarts'
  import 'echarts/theme/macarons.js'
  export default {
    data() {
      return {
        browserUpdateTime: '',
        browserAgv: 0,
        cpuData:[],
        ramData:[],
        diskData:[]
      }
    },
    mounted() {
      this.init_a()
      this.init_b()
      this.init_c()
      this.init_d()
      this.browserUpdateTime = parseTime(new Date())
    },
    methods: {
      async init_a() {
        const res = await weekVisit()
        let chartTitle = [],
          timeArr = [],
          chartData = [],
          seriesData = [],
          colorArr = [
            { b: 'rgba(128, 255, 165)', e: 'rgba(1, 191, 236)' },
            { b: 'rgba(0, 221, 255)', e: 'rgba(77, 119, 255)' },
            { b: 'rgba(55, 162, 255)', e: 'rgba(116, 21, 219)' },
            { b: 'rgba(255, 0, 135)', e: 'rgba(135, 0, 157)' },
            { b: 'rgba(255, 191, 0)', e: 'rgba(224, 62, 76)' },
            { b: 'rgba(55, 162, 255)', e: 'rgba(116, 21, 219)' },
            { b: 'rgba(255, 0, 135)', e: 'rgba(135, 0, 157)' },
            { b: 'rgba(255, 191, 0)', e: 'rgba(224, 62, 76)' },
          ],
          agvSum = 0,
          agvCount = 0
        res.data.forEach((m) => {
          timeArr.push(m.time)
          m.list.forEach((s) => {
            let ct = chartTitle.filter((g) => g == s.name)
            if (ct.length == 0) {
              chartTitle.push(s.name)
            }
          })
        })
        chartTitle.forEach((m) => {
          let _tempdata = { name: m, value: [] }
          res.data.forEach((s) => {
            let ct = s.list.filter((g) => g.name == m)
            agvCount += 1
            if (ct.length > 0) {
              _tempdata.value.push(ct[0].count)
              agvSum += ct[0].count
            } else {
              _tempdata.value.push(0)
            }
          })
          chartData.push(_tempdata)
        })
        this.browserAgv = parseInt(agvSum / agvCount)
        chartData.forEach((m, cdindex) => {
          seriesData.push({
            name: m.name,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: colorArr[cdindex].b,
                },
                {
                  offset: 1,
                  color: colorArr[cdindex].e,
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: m.value,
          })
        })
        const chartDom = document.getElementById('chart_a')
        let myChart = echarts.init(chartDom)
        let option
        option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
          title: {
            text: '访问量',
            bottom: 'center',
            show: false,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            data: chartTitle,
            show: false,
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: timeArr,
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: seriesData,
        }
        option && myChart.setOption(option)
      },
      init_b() {
        var chartDom = document.getElementById('chart_b')
        var myChart = echarts.init(chartDom)
        var option
        option = {
          color: ['#00DDFF', '#37A2FF'],
          title: {
            text: '某地区蒸发量和降水量',
            subtext: '纯属虚构',
            show: false,
          },
          tooltip: {
            trigger: 'axis',
            show: true,
          },
          legend: {
            data: ['蒸发量', '降水量'],
            show: false,
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '3%',
            containLabel: true,
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: ['0时', '4时', '8时', '12时', '16时', '24时'],
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '订单量',
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [{ type: 'average', name: '平均值' }],
              },
            },
            {
              name: '退单量',
              type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
              markPoint: {
                data: [
                  { name: '今日最高', value: 182.2, xAxis: 7, yAxis: 183 },
                  { name: '今日最低', value: 2.3, xAxis: 11, yAxis: 3 },
                ],
              },
              markLine: {
                data: [{ type: 'average', name: '平均值' }],
              },
            },
          ],
        }

        option && myChart.setOption(option)
      },
      async init_c() {
        const resData = await browser()
        let echartRes = []
        resData.data.forEach((m) => {
          echartRes.push({ value: m.count, name: m.name })
        })
        const chartDom = document.getElementById('chart_c')
        const myChart = echarts.init(chartDom)
        let option
        option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
          tooltip: {
            trigger: 'item',
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '0%',
            containLabel: true,
          },
          legend: {
            top: '0%',
            left: 'center',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: echartRes,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }

        option && myChart.setOption(option)
      },
      async init_d(){
        let res=await deviceUse()
        const that=this
        res.data.forEach((m)=>{
          that.cpuData.push([m.time,m.cpuRate])
          that.ramData.push([m.time,m.ramRate])
          that.diskData.push([m.time,m.diskRate])
        })
        const chartDom = document.getElementById('chart_d')
        const myChart = echarts.init(chartDom)
        let option
        option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '5%',
            containLabel: true,
          },
    xAxis: {
        type: 'time',
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 20
    }, {
        start: 0,
        end: 20
    }],
    series: [
        {
            name: 'CPU使用占比',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: that.cpuData
        }
    ]
}
        option && myChart.setOption(option)
        this.init_e()
      },
      init_e(){
        const that=this
        const chartDom = document.getElementById('chart_e')
        const myChart = echarts.init(chartDom)
        let option
        option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '5%',
            containLabel: true,
          },
    xAxis: {
        type: 'time',
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 20
    }, {
        start: 0,
        end: 20
    }],
    series: [
        {
            name: 'CPU使用占比',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: that.ramData
        }
    ]
}
        option && myChart.setOption(option)
        this.init_f()
      },
      init_f(){
        const that=this
        const chartDom = document.getElementById('chart_f')
        const myChart = echarts.init(chartDom)
        let option
        option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '5%',
            containLabel: true,
          },
    xAxis: {
        type: 'time',
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 20
    }, {
        start: 0,
        end: 20
    }],
    series: [
        {
            name: 'CPU使用占比',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: that.diskData
        }
    ]
}
        option && myChart.setOption(option)
      },
      errorHandler() {
        return true
      },
    },
  }
</script>
<style lang="scss" scoped>
  .user-wall {
    .username {
      margin-left: 20px;
      padding-top: 10px;
      flex: 1;
      p {
        margin: 5px 0 0 0;
      }
    }
    .user-right {
      margin: 0px;
      list-style: none;
      display: flex;
      li {
        margin-left: 30px;
        text-align: right;
        p {
          margin: 5px 0 0 0;
          font-size: 20px;
        }
      }
    }
  }
</style>
<style>
  .user-right .el-tag {
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
  }
</style>
